<template>
  <div class="experience-list-container">
    <!-- 吸顶 -->
    <van-sticky>
      <div class="top-box">
        <!-- 导航栏 -->
        <MMNavBar
          title="面试技巧"
          @onClickLeft="$router.push('/find')"
        ></MMNavBar>
        <!-- `搜索的盒子` -->
        <div class="search-box" @click="$router.push('/shareSearch')">
          <div class="content">
            <i class="iconfont iconicon_search"></i> 请输入关键字
          </div>
        </div>
      </div>
    </van-sticky>
    <!-- 列表 -->
    <div class="experience-box">
      <!-- 包裹 list -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="experience-list">
          <MMShareItem
            v-for="item in shareList"
            :key="item.id"
            :item="item"
          ></MMShareItem>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
// 导入api
import { shareList } from '../../api/find'
export default {
  name: 'shareList',
  data () {
    return {
      // 列表数据
      shareList: [],
      // 是否加载中
      loading: false,
      // 是否加载完毕
      finished: false,
      // 定义分页参数
      // 起始索引
      start: 0,
      // 页容量
      limit: 5
    }
  },
  created () {
    // shareList().then(res => {
    //   // console.log(res)
    //   res.data.list.forEach(v => {
    //     if (v.author.avatar) {
    //       v.author.avatar = process.env.VUE_APP_URL + v.author.avatar
    //     }
    //   })
    //   this.shareList = res.data.list
    // })
  },
  methods: {
    // 加载数据
    onLoad () {
      // 开启加载数据
      shareList({ start: this.start, limit: this.limit }).then(res => {
        // console.log(res)
        res.data.list.forEach(v => {
          if (v.author.avatar) {
            v.author.avatar = process.env.VUE_APP_URL + v.author.avatar
          }
        })
        // 追加进去 如果直接赋值就不会出现累加效果
        this.shareList.push(...res.data.list)
        // 获取下一页的数据
        /*
          第一次 0开始 5条
          第二次 5开始 5条
        */
        this.start += this.limit
        // 判断是否加载完毕
        if (this.shareList.length >= res.data.total) {
          // 停止继续加载
          this.finished = true
        }
        // 关闭加载状态
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less">
.experience-list-container {
  min-height: 100vh;
  background: @white-color;
  .top-box {
    background: @white-color;
  }
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  .search-box {
    position: relative;
    font-size: 14px;
    color: #b3b3b3;
    padding-bottom: 10px;
    .content {
      height: 34px;
      width: 345px;
      margin: 0 auto;
      background: @bg-color;
      border-radius: 17px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &:after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      top: -50%;
      right: -50%;
      bottom: -50%;
      left: -50%;
      border: 0 solid #ebedf0;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      border-bottom-width: 0.02667rem;
    }
    .iconfont {
      font-size: 19px;
    }
  }
  .experience-box {
    padding: 0 15px;
    background: @white-color;
  }
}
</style>
